<!DOCTYPE html>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="MCAS/protovis-d3.2.js"></script>
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<!-- Jackson Street raw score frequencies. Defined:
     c: disposable, ends up as number of columns
     jsCol: column map with column names as keys and column indexes as values
     jsRawScoreFreq: a matrix with columns as recorded in col
     -->
<script type="text/javascript" src="file://C:/Documents and Settings/dolsson/My Documents/My Dropbox/edu/districts/Northampton/Jackson Street/Jackson Street raw score frequencies ELA.js"></script>
<script type="text/javascript">

$(function() {
    $('body').append(
        '<p>' + jsRawScoreFreq.length + ' rows'
        + '<div id="graph_div"></div>'
    );
    draw($('#graph_div'));
});

var vis;

function draw(div) {
    var w = 800, h = 200;
    var grades = pv.uniq(jsRawScoreFreq.map(function(r) { return r[jsCol.Grade] }));
    grades.sort(numOrder);
    function gradeFreq(grade) {
        return this.reduce(function(accum, row) { return row[jsCol.Grade] == grade ? accum + row[jsCol.Count] : accum }, 0);
    }
    var freqGrade = grades.map(gradeFreq, jsRawScoreFreq);
    y = pv.Scale.ordinal(grades).split(0, h);
    x = pv.Scale.linear(0, pv.max(freqGrade)).range(0, w);
    var vis = new pv.Panel(div[0])
        .width(w)
        .height(h)
        .left(20)
        .add(pv.Bar)
        .data(grades)
        .left(0)
        .width(function() { return x(freqGrade[this.index]) })
        .top(y)
        .height((h / grades.length) * 0.5)
        .fillStyle('gray')
        .anchor('left')
        .add(pv.Label)
        .text(function(grade) { return grade })
        .textAlign('right')
        .root
        .render()
        ;
}

function numOrder(a, b) { return a - b }

</script>
<body></body>
